<template>
  <div  >
    <div class="row">
      <q-card dense class="fit row justify-around no-wrap uploaddiv">
        <q-card-section class="col-3">
          <q-uploader
            url="http://localhost:4444/upload"
            label="Custom header"
            multiple
          >
            <template v-slot:header="scope">
              <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
                <q-btn v-if="scope.queuedFiles.length > 0" icon="clear_all" @click="scope.removeQueuedFiles" round dense flat >
                  <q-tooltip>Clear All</q-tooltip>
                </q-btn>
                <q-btn v-if="scope.uploadedFiles.length > 0" icon="done_all" @click="scope.removeUploadedFiles" round dense flat >
                  <q-tooltip>Remove Uploaded Files</q-tooltip>
                </q-btn>
                <q-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
                <div class="col">
                  <div class="q-uploader__title">选择要上传的文件</div>
                  <div class="q-uploader__subtitle">{{ scope.uploadSizeLabel }} / {{ scope.uploadProgressLabel }}</div>
                </div>
                <q-btn v-if="scope.canAddFiles" type="a" icon="add_box" @click="scope.pickFiles" round dense flat>
                  <q-uploader-add-trigger />
                  <q-tooltip>Pick Files</q-tooltip>
                </q-btn>
                <q-btn v-if="scope.canUpload" icon="cloud_upload" @click="scope.upload" round dense flat >
                  <q-tooltip>Upload Files</q-tooltip>
                </q-btn>

                <q-btn v-if="scope.isUploading" icon="clear" @click="scope.abort" round dense flat >
                  <q-tooltip>Abort Upload</q-tooltip>
                </q-btn>
              </div>
            </template>
          </q-uploader>
        </q-card-section>
        <q-card-section class="col-9">
          <q-list  bordered separator>
            <q-item class="fit row wrap justify-start  filelist-dive"  v-if="files.length>0" >
              <q-item-section class="col-1" style="min-width: 60px; max-width: 60px;">
                <q-item-label>文件列表</q-item-label>
              </q-item-section>
              <q-item-section >
                <q-list bordered separator class="filelist-item">
                  <q-item clickable v-ripple class="row no-wrap justify-between  items-center " v-for="(file, index) in files" :key="file">
                    <q-item-label>{{index+1}}. {{ file }}</q-item-label>
                      <q-item-section class="col-1  " >
                        <q-btn flat  color="primary" icon="delete"  @click="deleteUploads(file)" />
                      </q-item-section>

                  </q-item>
                </q-list>
              </q-item-section>
            </q-item>
            <q-item v-else>
              <q-item-section>
                <q-item-label>文件列表为空</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </q-card-section>
      </q-card>



    </div>
    <q-btn class="q-my-sm" push color="white" text-color="primary" @click="fetchWarningList()" label="开始解析" />

    <!--解析结果采用 list进行 展示，依次展示解析的结果-->

    <div class="q-pa-md">
      <div class="text-overline">预警信息解析：</div>
      <q-card class="my-card" flat bordered>




        <q-card-section>
          <q-list bordered separator class="q-my-sm">
            <q-item v-for="(warning, index) in warnings.split(';')" :key="index" clickable v-ripple class="row no-wrap justify-between items-center">
              <q-item-section class="col-11 ">
                <q-item-label>{{ warning }}</q-item-label>
              </q-item-section>
              <q-item-section class="col-1">
                <q-btn flat color="primary" icon="delete" @click="deleteWarning(warning)" />
              </q-item-section>
            </q-item>
          </q-list>
        </q-card-section>

      </q-card>
    </div>


    <div class="q-pa-md">
      <div class="text-overline">预警段解析：</div>
      <q-card class="my-card" flat bordered>
        <q-card-section>
          <q-list bordered separator class="q-my-sm">
            <q-item v-for="(warning, index) in warningsPice.split(';')" :key="index" clickable v-ripple class="row no-wrap justify-between items-center">
              <q-item-section class="col-11 ">
                <q-item-label>{{ warning }}</q-item-label>
              </q-item-section>
              <q-item-section class="col-1">
                <q-btn flat color="primary" icon="delete" @click="deleteWarning(warning)" />
              </q-item-section>
            </q-item>
          </q-list>
        </q-card-section>

      </q-card>
    </div>



    <!--解析结果采用 list进行 展示，依次展示解析的结果-->
    <div class="q-pa-md">
      <div class="text-overline">光缆段解析：</div>
      <q-card class="my-card" flat bordered>
        <q-card-section>
          <q-list bordered separator class="q-my-sm">
            <q-item v-for="(warning, index) in guanglanList.split(';')" :key="index" clickable v-ripple class="row no-wrap justify-between items-center">
              <q-item-section class="col-11 ">
                <q-item-label> {{ warning }}</q-item-label>
              </q-item-section>
              <q-item-section class="col-1">
                <q-btn flat color="primary" icon="delete" @click="deleteWarning(warning)" />
              </q-item-section>
            </q-item>
          </q-list>
        </q-card-section>
      </q-card>
    </div>


<!--    使用list展示dict-->
    <div class="q-pa-md">
      <div class="text-overline">光路解析：</div>
      <q-card class="my-card" flat bordered>
        <q-card-section>
          <q-list bordered separator class="q-my-sm">
            <q-item  clickable v-ripple class="row no-wrap justify-between items-center">
              <q-item-section class="col-11 ">

              <q-item-label>{{guangluDict}}</q-item-label>

              </q-item-section>
              <q-item-section class="col-1">
                <q-btn flat color="primary" icon="delete" @click="deleteDict(warning)" />
              </q-item-section>
            </q-item>
          </q-list>
        </q-card-section>
      </q-card>
    </div>



    <!--    使用list展示dict-->
    <div class="q-pa-md">
      <div class="text-overline">光路业务影响统计：</div>
      <q-card class="my-card" flat bordered>
        <q-card-section>
          <q-list bordered separator class="q-my-sm">
            <q-item  clickable v-ripple class="row no-wrap justify-between items-center">
              <q-item-section class="col-11 ">

                <q-item-label>{{guanglanAna}}</q-item-label>

              </q-item-section>
              <q-item-section class="col-1">
                <q-btn flat color="primary" icon="delete" @click="deleteDict(warning)" />
              </q-item-section>
            </q-item>
          </q-list>
        </q-card-section>
      </q-card>
    </div>


  </div>





</template>









<script>
export default {
  data() {
    return {
      files: [],
      warnings:"",
      warningsPice:"",
      guanglanList:"",
      guangluDict:{},
      guanglanAna:{}
    };
  },
  methods: {
    onFileAdded(file) {
      // 处理文件添加事件
      console.log('File added:', file);
    },
    onFileFailed(error) {
      // 处理文件上传失败事件
      console.error('File upload failed:', error);
    },
    onFileRemoved(file) {
      // 处理文件移除事件
      console.log('File removed:', file);
    },
    importData() {
      // 处理导入数据的逻辑
      console.log('Importing data...');
      // 在这里进行解析导入内容的分析
      // 可以使用第三方库，如 XLSX，解析 Excel 文件
    },
    removeFile(file) {
      // 移除文件
      this.files = this.files.filter(f => f !== file);
    },
    // 构建post请求，请求地址 localhost:4444/yewu_ana 请求参数为guanglan_list
    fetchYewuAna() {
      // 获取文件列表
      this.$axios.post('http://127.0.0.1:4444/yewu_ana', {
        guanglan_list:this.guanglanList
      }).then((response) => {
        console.log(response.data)
        const {yewu_ana} = response.data
        this.guanglanAna = yewu_ana

      }
      )
    },
    // 构建post请求 请求地址 localhost:4444/guanglu_list 请求参数为guanglan_list
    async fetchGuangluList() {
      // 获取文件列表
      this.$axios.post('http://127.0.0.1:4444/guanglu_list', {
        guanglan_list:this.guanglanList
      }).then((response) => {
        console.log(response.data)
        const {guanglu_dict} = response.data
        console.log(guanglu_dict)
        this.guangluDict=guanglu_dict
      }).catch((error) => {
          console.log(error)
        }
      )
    },
    // 构建post请求 请求名为fetchRouteAna 请求地址localhost:4444/route_ana 请求参数为warning_list
    async fetchRouteAna() {
      // 获取文件列表
      this.$axios.post('http://127.0.0.1:4444/route_ana', {
        warning_list:this.warningsPice
      }).then((response) => {
        console.log(response.data)
        const {guanglan_list} = response.data
        // 解析返回的json数据
        this.guanglanList=guanglan_list
        console.log(this.guanglanList)

      }).catch((error) => {
        console.log(error)
      }
      )
    }
    ,
    // 构建post请求 localhost:4444/warning_list 请求参数为result_string和传入参数组成的json
    async fetchWarningListPice() {
      // 获取文件列表
      this.$axios.post('http://127.0.0.1:4444/warning_list', {
        result_string:this.warnings
      }).then((response) => {
        console.log(response.data)
        //response.data转为json
        const { warning_list } = response.data;
        console.log(warning_list)
      //   list转成以“;”分割的string
        const result_string = warning_list.join(';');
        console.log(result_string)
        this.warningsPice=result_string
      })
    },

    deleteUploads(file) {
      // 删除文件
      this.$axios.post('http://127.0.0.1:4444/delete', {
        filename:file
      }).then((response) => {
        console.log(response.data)
        //response.data转为json
        const { status } = response.data;

        // const { status, files } = response.data;
        if (status === "success") {
          console.log('success');
          this.files = this.files.filter(f => f !== file);
          return true;
        } else {
          console.error('Failed to delete file');
        }
      }).catch((error) => {
        console.error('Error:', error);
      });
    }
    ,
    // 构建请求localhost:4444/warninglists的函数
    async fetchWarningList() {
      this.warnings=""
      this.warningsPice=""
      this.guanglanList=""
      this.guangluDict=""
      this.guanglanAna=""
      try {
        const response = await this.$axios.post('http://127.0.0.1:4444/warninglists', {
          headers: {
            'Content-Type': 'application/json'
          }
        });
        console.log(response.data);
        const {result} = response.data
        console.log(result)
        // 停2秒

        // 解析1
        this.warnings=result

        //   解析2
        await this.fetchWarningListPice()
        await new Promise(resolve => setTimeout(resolve, 2000));
      //   3光缆解析
        await this.fetchRouteAna()
        await new Promise(resolve => setTimeout(resolve, 2000));
      // 光路解析
        await  this.fetchGuangluList()
        await new Promise(resolve => setTimeout(resolve, 2000));
        this.fetchYewuAna()


      }
      catch (error) {
        console.error(error);
      }
    }
    ,
    async fetchFileList() {
      try {
        //axios 请求添加 content-type:application/json  header


        const response = await this.$axios.get('http://127.0.0.1:4444/list', {
          headers: {
            'Content-Type': 'application/json'
          }
        });
        console.log(response.data)
        //response.data转为json
        const { status, files } = JSON.parse(response.data);

        // const { status, files } = response.data;


        console.log("files为空吗"+files)
        console.log(status, files)

        if (status === 'success' && files!="") {
          this.files = files.split(";");
        } else {
          console.log('文件为空');
        }
      } catch (error) {
        console.error('Error fetching file list:', error);
      }
    }
  },
  mounted() {
    // 发送请求获取文件列表
    this.fetchFileList();
    console.log(this.files.length)
  //   每2秒调用一次fetchFileList
  //   setInterval(this.fetchFileList, 2000);

  },
  created() {
    console.log(this.files.length)
  }
}
</script>
<!--添加样式-->
<style scoped>
.rounded-btn {
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
.filelist-dive {

  min-height:340px!important;
  max-height: 350px!important;
}
.filelist-item {
  overflow-y: auto;
}
.uploaddiv{
  min-height:370px!important;
  max-height: 370px!important;
}
</style>
